<template>
	<view class="wrap">
		<view class="searchInput"><u-search placeholder="请输入您要搜索的内容" v-model="isSearchGood" :animation="true"></u-search></view>
		<view class="titleImage">
			<u-image
				width="100%"
				height="100%"
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-19d78ede-775e-4118-8140-1da3d628e89e/cd2156fa-1b8c-4445-adc8-d5a94db68371.jpg"
			></u-image>
		</view>
		<view class="titleSort">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="默认排序" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="价格区间" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="goods">
			<!-- <u-button @click="clear">清空列表</u-button> -->
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load threshold="-250" border-radius="10" :image="item.goods_thumb" :index="item._id" @click="skipGoodDetailPage"></u-lazy-load>
						<view class="demo-title">{{ item.name }}</view>
						<view class="demo-price">{{ item.goodsNumber }}元</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" v-for="(val, index) in item.keywords" :key="index">{{ val }}</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-250" border-radius="10" :image="item.goods_thumb" :index="item._id" @click="skipGoodDetailPage"></u-lazy-load>
						<view class="demo-title">{{ item.name }}</view>
						<view class="demo-price">{{ item.goodsNumber }}元</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" v-for="(val, index) in item.keywords" :key="index">{{ val }}</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addLoadMore"></u-loadmore>
		</view>
	</view>
</template>

<script>
import waterfall from '../../components/waterfall/waterfall.vue';
export default {
	components: {
		waterfall
	},
	data() {
		return {
			commodity: {},
			value1: '',
			value2: '',
			isSearchGood: '',
			options1: [
				{
					label: '默认排序',
					value: 1
				},
				{
					label: '销量优先',
					value: 2
				},
				{
					label: '价格最低',
					value: 3
				}
			],
			options2: [
				{
					label: '0-199',
					value: 1
				},
				{
					label: '200-499',
					value: 2
				},
				{
					label: '500-799',
					value: 3
				}
			],
			goodsPaging: {
				goodsLimit: 10,
				goodsSkip: 0
			},
			goodsListCount: 0,
			loadStatus: 'loading',
			flowList: []
		};
	},
	methods: {
		// 获取商品数据方法
		async getGoodImages(number, id) {
			const that = this;
			// 获取商品数据
			await uniCloud
				.callFunction({
					name: 'inquireDataBase',
					data: { name: 'opendb-mall-goods', number: number, id: id }
				})
				.then(res => {
					res.result.data.forEach(item => {
						item.keywords = item.keywords.split(',');
						that.flowList.push(item);
					});
					that.loadStatus = 'loadmore';
				});
			//获取商品总数据条数
			await uniCloud
				.callFunction({
					name: 'count',
					data: { name: 'opendb-mall-goods', number: number, id: id }
				})
				.then(res => {
					that.goodsListCount = res.result.expensiveCount;
				});
		},
		// 页面跳转
		skipGoodDetailPage(val) {
			console.log(val);
			this.$store.state.pichGood.id = val;
			uni.navigateTo({
				url: `../goodContent/goodContent?_id=${val}`
			});
		},
		// 点击加载更多按钮
		addLoadMore() {
			if (this.goodsListCount == this.flowList.length) {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loading';
			this.goodsPaging.goodsSkip += this.goodsPaging.goodsLimit;
			this.getGoodImages(this.goodsPaging, this.commodity);
		},
		clear() {
			this.$refs.uWaterfall.clear();
		}
	},
	onLoad: function(option) {
		this.$forceUpdate();
	},
	async created() {
		this.commodity = this.$store.state.inquireDataBase.rarent_id;
		await this.getGoodImages(this.goodsPaging, this.$store.state.inquireDataBase.rarent_id);
	}
};
</script>

<style lang="scss">
page {
	background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
}
.searchInput {
	width: 100%;
	height: 80rpx;
}
.titleImage {
	width: 100%;
	height: 35%;
}
.demo-warter {
	border-radius: 8px;
	margin: 10rpx;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}
.titleSort {
	background-color: #ffffff;
}
.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	margin-right: 25rpx;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
</style>
